import { Tree } from 'antd';
import styles from './index.less';

const { DirectoryTree } = Tree;

const treeData = [
  {
    title: '目录1',
    key: '0-0',
    children: [
      {
        title: '子目录1-1',
        key: '0-0-0',
        children: [
          { title: '文件1-1-1', key: '0-0-0-0', isLeaf: true },
          { title: '文件1-1-2', key: '0-0-0-1', isLeaf: true },
        ],
      },
      {
        title: '子目录1-2',
        key: '0-0-1',
        children: [
          { title: '文件1-2-1', key: '0-0-1-0', isLeaf: true },
          { title: '文件1-2-2', key: '0-0-1-1', isLeaf: true },
        ],
      },
    ],
  },
  {
    title: '目录2',
    key: '0-1',
    children: [
      { title: '文件2-1', key: '0-1-0', isLeaf: true },
      { title: '文件2-2', key: '0-1-1', isLeaf: true },
    ],
  },
];

export default function IndexPage() {
  const onSelect = (keys: React.Key[], info: any) => {
    console.log('Trigger Select', keys, info);
  };

  const onExpand = (keys: React.Key[], info: any) => {
    console.log('Trigger Expand', keys, info);
  };

  return (
    <div className={styles.container}>
      <div className={styles.sidebar}>
        <DirectoryTree
          multiple
          defaultExpandAll
          onSelect={onSelect}
          onExpand={onExpand}
          treeData={treeData}
        />
      </div>
      <div className={styles.content}>
        <h1 className={styles.title}>Page index</h1>
      </div>
    </div>
  );
}
